<template>
  <el-dialog
    class="modify-class"
    width="500px"
    title="修改密码"
    visible
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <el-form ref="formRef" :model="formData" class="form" label-width="120px" :rules="rules">
      <el-form-item label="原始密码" prop="password">
        <el-input
          class="input"
          type="password"
          v-model="formData.password"
          placeholder="请输入原始密码"
        />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input
          class="input"
          type="password"
          v-model="formData.newPassword"
          placeholder="请输入新密码"
        />
      </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
        <el-input
          class="input"
          type="password"
          v-model="formData.checkPass"
          placeholder="请确认密码"
        />
      </el-form-item>
    </el-form>
    <div class="dialog-footer" slot="footer">
      <el-button class="btn-comfirm" type="primary" @click="saveHandle">确认</el-button>
      <el-button class="btn-cancel" @click="cancelHandle">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { loginApis } from '@/apis'

export default {
  props: {
    editData: {
      type: Object,
      default() {
        return null;
      },
    },
  },
  data() {
   
   var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.formData.checkPass !== '') {
            this.$refs.formData.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.formData.newPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      loading: false,
      formData: {
        userName : this.$store.getters.userInfo.userName,
        password: '',
        newPassword: '',
        checkPass:''
      },
      rules: {
        password: [{ required: true, message: '请输入原始密码', trigger: 'blur' }],
        newPassword: [
          { validator: validatePass, trigger: 'blur' }
        ],
         checkPass: [
         { validator: validatePass2, trigger: 'blur' }
        ]
      },
    };
  },
  methods: {
    close(refresh) {
      this.$emit("close", refresh);
    },
    beforeClose() {
      this.close(false);
    },
    cancelHandle() {
      this.close(false);
    },
    saveHandle() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          await loginApis.updatePassword({...this.formData})
          this.$message.success('修改成功，请重新登录')
          this.$router.push({name:"login"})
          this.close()
        } else {
          return false
        }
      })
    },
  }
};
</script>

<style lang="scss" scoped>
</style>